import { Component, Input, Output, EventEmitter } from '@angular/core';
import { animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-zbpopup',
  templateUrl: './zbpopup.component.html',
  styleUrls: ['./zbpopup.component.css'],
  host: {
     '[@state]' : 'state',
  },
  animations: [
    trigger('state', [
      state('opened', style({transform: 'translateY(0%)'})),
      state('void, closed', style({transform: 'translateY(100%)', opacity: 0})),
      transition('* => *', animate('100ms ease-in')),
    ])
  ],

})
export class ZBPopupComponent {

  private state: 'opened' | 'closed' = 'closed';
  private _message: string;

  @Input()
  set message(msg: string) {
    this._message = msg;
    this.state = 'opened';
  }
   get message(): string {
     return self._message;
   }

   @Output()
   closed = new EventEmitter();
}
